<template>
    <div id='tmpl'>
        <!-- 电影详情开始 -->
        <div class="detail">
            <h1>{{movie.title}}</h1>
            <div >
                <div class="dti-i">
                    <img :src="movie.images.large">
                </div>
                <div class="dti-w">
                    <p>
                        <strong>导演：</strong>
                        <span v-for='item in movie.directors'>
                           {{item.name}} 
                        </span>
                    </p>
                    <p>
                        <strong>主演：</strong>
                        <span v-for='item in movie.casts'>
                             {{item.name}} 
                        </span>
                    </p>
                    <p>
                        <strong>类型：</strong>{{movie.genres.join('、')}}</p>
                    <p>
                        <strong>国家：</strong>{{movie.countries.join('、')}}</p>
                    <p>
                        <strong>评分：</strong>{{movie.rating.average}}</p>
                    <p>
                        <strong>时间：</strong>{{movie.year}}</p>
                    <p>
                        <strong>又名：</strong>{{movie.aka.join('、')}}</p>
                </div>
            </div>
            <h3>剧情简介:</h3>
            <p style="color:#676767">{{movie.summary}}</p>
        </div>
        <!-- 电影详情结束 -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: 0,
            movie:{}
        };
    },
    created() {
        this.id = this.$route.params.id
        this.getvideosinfo()
    },
    methods: {
        getvideosinfo: function () {
            var url = 'http://api.douban.com/v2/movie/subject/'+this.id ;
            this.$http.jsonp(url).then(function(response){
                this.movie = response.body;
            })

        }
    }
}
</script>
<style lang="css" scoped>
    .detail {
        padding:5px;
        
    }
    .detail h1 {
        color: #1A74FA;
        margin-bottom: 15px;
    }
    .dti-i {
        margin-bottom: 5px;
    }
    .dti-i img {
        width: 100%;
        height: 400px;
    }
    .detail h3 {
        color: yellowgreen;
    }
</style>